<template>
  <div>请输入要创建水印的值：<el-input v-model="input" placeholder="Please input" />
    <div>
      <el-button @click="createWaterMark({type:'load'})"> 创建整页水印 </el-button>
      <el-button @click="createWaterMark({type:'gradual'})"> 创建整页渐变水印 </el-button>
      <el-button @click="createWaterMark({type:'gradual90'})"> 创建整页渐变且水平90度水印 </el-button>
      <el-button @click="createWaterMark({type:'gradualOp'})"> 创建整页高透明渐变水印 </el-button>
      <el-button @click="createWaterMark({type:'clear'})"> 清除整页水印 </el-button>
    </div>
    <div id="waterMarkDiv" style="height:600px;position: relative;">

    </div>
    <div>
      <el-button @click="createWaterMark({type:'load',html:'waterMarkDiv'})"> 创建局部水印 </el-button>
      <el-button @click="createWaterMark({type:'gradual',html:'waterMarkDiv'})"> 创建局部渐变水印 </el-button>
      <el-button @click="createWaterMark({type:'gradual90',html:'waterMarkDiv'})"> 创建局部渐变且水平90度水印 </el-button>
      <el-button @click="createWaterMark({type:'gradualOp',html:'waterMarkDiv'})"> 创建局部高透明渐变水印 </el-button>
      <el-button @click="createWaterMark({type:'clear',html:'waterMarkDiv'})"> 清除局部水印 </el-button>
    </div>
    <div id="" style="height:600px">

</div>
  </div>
</template>

<script setup lang="ts">
import { Ref, ref, onMounted, unref, toRefs } from "vue";
import waterMark, { settingInf } from "./components/waterMark"; //引入配置文件
const input = ref<string>("测试水印测试水测试水印测试水");
onMounted(() => {
  createWaterMark({ type: "init" });
});

const createWaterMark = ({
  type,
  html = "body",
}: {
  type: string;
  html: string;
}) => {
  switch (type) {
    case "init":
      waterMark.init({ watermark_txt: "", watermark_parent_node: html });
      break;
    case "clear":
      waterMark.load({ watermark_txt: "", watermark_parent_node: html });
      break;
    case "load":
      waterMark.load({
        watermark_txt: input.value,
        watermark_parent_node: html,
      });
      break;
    case "gradual":
      waterMark.load({
        watermark_txt: input.value,
        watermark_parent_node: html,
        background: "linear-gradient(to right, #ed65ff, #4c48fb)",
        "-webkit-background-clip": "text",
        "-webkit-text-fill-color": "transparent",
      });
      break;
    case "gradual90":
      waterMark.load({
        watermark_txt: input.value,
        watermark_parent_node: html,
        background: "linear-gradient(to right, #ed65ff, #4c48fb)",
        "-webkit-background-clip": "text",
        "-webkit-text-fill-color": "transparent",
        watermark_angle: 0,
      });
      break;
    case "gradualOp":
      waterMark.load({
        watermark_txt: input.value,
        watermark_parent_node: html,
        background: "linear-gradient(to right, #ed65ff, #4c48fb)",
        "-webkit-background-clip": "text",
        "-webkit-text-fill-color": "transparent",
        watermark_alpha: 0.2,
      });
      break;
    default:
      break;
  }
};
</script>

<style scoped>
</style>